<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS中内存泄漏的几种情况</title>
</head>

<body>
  <div class="box">
    <div class="text">你好</div>
  </div>
</body>
<script>
  // JS中内存泄漏的几种情况
  // 内存泄漏：由于疏忽或错误造成程序未能释放已经不再使用的内存
  // 通俗的来讲就是我不在用到的内存没有即时释放出来，从而造成了内存上面的浪费
  // 1. 意外的全局变量
  // 使用js的严格模式来解决
  'use strict'
  // function fun() {
  // 在函数里面定义一个全局变量，在非严格情况下，不用声明也可以赋值
  // 没有声明的变量就属于全局变量
  // a = 10
  // console.log(a);
  // this.b = 20 // this指向window
  // }
  // fun()
  // console.log(a);
  // console.log(b);

  // 2. 定时器-->在不用的时候，及时清除定时器/没有及时清楚的 dom 元素-->text = null
  var box = document.querySelector('.box')
  // 写个定时器
  var time = setInterval(() => {
    var text = document.querySelector('.text')
    // 直接清楚 dom 元素
    box.removeChild(text)
    console.log(text);
    text = null
    // 这时候 text为 true，然后让他清楚定时器
    if(!text) {
      clearInterval(time)
    }
  }, 2000)
</script>

</html>